<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title="邀约面试" :isAppBtn="false"></HeadCustom>
		<view class="card-box">
			<view class="card-hd mt32 fboxCol Ycenter">
				<view class="userInfo bg-21242C fboxRow" @click="goPage">
					<image class="avatar" :src="detail.avatar" mode="aspectFill"></image>
					<view class="fboxCol flex1">
						<view class="name font34">{{detail.realName}}</view>
						<view class="info mt8 lh38 color-ACB4C7 font30">
							<text>{{detail.workYears}}</text>
							<text style="margin: 0 10rpx;">{{gainData(detail.education, 'educationList').label}}</text>
							<text v-if="detail.salaryMin == 0 || !detail.salaryMin">面议</text>
							<text v-else>{{unitNum(detail.salaryMin)}}-{{unitNum(detail.salaryMax)}}</text>
						</view>
						<view class="mt16 fboxRow Ycenter lh38 font26">
							<image class="icon mr12" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.0/recruit/icon-5.png" mode="aspectFill"></image>期望职位：
							<view class="font-ell1 maxw250">
								<text style="margin-right: 10rpx;" v-for="sub in detail.expectPositionList" :key="sub">{{sub}}</text>
							</view>
						</view>
						<view class="icon-right">
							<text class="bwfont bw-arrow-right color-ACB4C7 font28"></text>
						</view>
					</view>
				</view>
			</view>
			<view class="card-bd mt40 fboxCol">
				<view class="fboxCol">
					<view class="tit color-E8CDA7 font34 flex1">邀约面试时间</view>
					<view class="action mt16 lh44 fboxRow Ycenter font30" @click="isInvite = true">
						<view class="flex1">
						<text v-if="fromData.gmtInterview">{{fromData.gmtInterview}}</text>
						<text v-else class="color-6B707C">请选择面试时间</text>
						</view>
						<text class="bwfont bw-arrow-right color-ACB4C7 font28"></text>
					</view>
				</view>
				<view class="line"></view>
				<view class="tit color-E8CDA7 font34 flex1">邀约面试职位 <text class="color-6B707C font30">（单项）</text></view>
				<view class="fboxCol mt20 Ycenter Xcenter" v-if="listData.length || listConfig.loading =='loading'">
					<view class="position-item mt20 bg-21242C" v-for="(item, index) in listData" :key="index" @click="radioClick(item)">
						<view class="hd fboxRow Ycenter">
							<view class="flex1 font30 lh44">{{item.jobName}}</view>
							<view class="font26 lh38">
								<text :class="[item.jobStatus == 2 ? 'color-6B707C' : 'color-E8CDA7']" v-if="item.jobStatus != 1">{{gainData(item.jobStatus, 'jobStatus').label}}</text>
							</view>
						</view>
						<view class="bd lh38 mt8 color-6B707C">
							<text>{{gainData(item.minEducation, 'educationList').label}}</text>
							<text class="ml24">{{gainData(item.workExperience, 'workExperience').label}}</text>
							<text class="ml24">
								<text v-if="item.salaryMin == 0 || !item.salaryMin">面议</text>
								<text v-else>{{unitNum(item.salaryMin)}}-{{unitNum(item.salaryMax)}}</text>
							</text>
						</view>
						<view class="icon-radio fboxRow Ycenter Xcenter">
							<u-icon v-if="item.id == fromData.jobId" name="checkmark" color="#E8CDA7" size="14"></u-icon>
						</view>
					</view>
					<u-loadmore fontSize="24rpx" :status="listConfig.loading" />
				</view>
				
				<view class="fboxCol mt20 Ycenter Xcenter" v-if="!listData.length">
					<view class="position-item mt20 bg-21242C">
						<view class="hd fboxRow Ycenter">
							<view class="flex1 font30 lh44">暂无相关职位</view>
						</view>
						<view class="bd lh38 mt8 color-6B707C">
							请发布职位招聘信息后再邀约面试
						</view>
					</view>
				</view>
			</view>
		</view>
		<template v-if="isInvite">
			<PickerBlack  type="datetime" :minDate="startDate" :maxDate="endDate" :isShow.sync="isInvite"  @confirm="pickerInvite" />
		</template>
		<BottomFixed v-if="!detail.inviteFlag">
			<view class="btn-group-inner flex1 fboxRow Ycenter Xcenter">
				<view class="btn flex1 fboxRow Ycenter Xcenter font30 color-141720 bg-linear" @click="inviteTap" v-if="listData.length">邀约</view>
				<view class="btn flex1 fboxRow Ycenter Xcenter font30 color-141720 bg-linear-35" v-else>邀约</view>
			</view>
		</BottomFixed>
	</view>
</template>

<script>
	import {
		jobList, resumeDetail, orgInterview
	} from '@/api/recruit.js';
	import {listMixins} from '../common/list.mixins.js';
	import {gainData} from '../common/config.js';
	import { timestampToTime, getDate, getMymethod, unitNum } from '@/static/js/common.js';
	import PickerBlack from '../components/picker-black.vue';
	import BottomFixed from '@/components/bottom-btn/fixed.vue'
	export default {
		components: {PickerBlack, BottomFixed},
		mixins: [listMixins],
		data() {
			return {
				theme: getApp().globalData.appTheme,
						globalColor: getApp().globalData.globalColor,
				gainData:gainData,
				getMymethod: getMymethod,
				unitNum: unitNum,
				fromData: {
					"companyId": getApp().globalData.companyId,
					"gmtInterview":"",
					"jobId": "",
					"memberId": "",
					"resumeId": ""
				},
				listConfig: {
					current: 1,
					size: 20,
					count: 0,
					loading: 'loading'
				},
				listData: [],
				companyId: getApp().globalData.companyId,
				id: '',
				jobId: '',
				detail: {},
				isInvite: false
			}
		},
		computed: {
			startDate() {
				console.log(getDate('start', 0))
				return getDate('start', 0);
			},
			endDate() {
				console.log(getDate('maxEnd', 1))
				return getDate('maxEnd',1);
			}
		},
		onLoad(option) {
			if(option && option.companyId){
				this.companyId = option.companyId
				this.fromData.companyId = option.companyId
			}
			if(option && option.jobId){
				this.fromData.jobId = option.jobId
			}
			if(option && option.id){
				this.id = option.id
			}
		},
		onShow() {
			this.getDetail()
			this.getInit()
		},
		methods: {
			goPage(){
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				// pagesApp/recruit/enterprise/index
				if(prevPage.route == 'pagesApp/recruit/user/detail'){
					uni.navigateBack({delta: 1})
				}else{
					this.$pageTo('/recruit/user/detail',{id: this.detail.id, companyId: this.companyId, pageType: 2})
				}
			},
			getDetail(){
				resumeDetail({id:this.id}).then(res=>{
					this.detail = res.data
					this.fromData.memberId = res.data.memberId
					this.fromData.resumeId = res.data.id
				})
			},
			getInit(){
				this.listData = []
				this.listConfig = {
					current: 1,
					size: 20,
					count: 0,
					loading: 'loading'
				}
				this.getList()
			},
			getList(){
				const { current, size, loading} = this.listConfig
				jobList({current, size, companyId: this.companyId, jobStatus: 1}).then(res=>{
					if(this.listData.length){
						this.listData = this.listData.concat(res.data.list) 
					}else{
						this.listData = res.data.list
					}
					this.listLoading(res)
				})
			},
			onReachBottom(){
				this.listMore()
			},
			radioClick(e){
				this.fromData.jobId = e.id
			},
			pickerInvite(e){
				this.isInvite = false
				this.fromData.gmtInterview=timestampToTime(e.value)
			},
			inviteTap(){
				if(getApp().globalData.companyInfo.authStatus != 1){
					uni.showToast({
						icon: 'none',
						title: '你的企业还未认证，请先认证后再操作！'
					})
					return
				}
				if(!this.fromData.gmtInterview){
					uni.showToast({
						icon: 'none',
						title: '请选择邀约面试时间'
					})
					return
				}
				if(!this.fromData.jobId){
					uni.showToast({
						icon: 'none',
						title: '请选择邀约面试职位'
					})
					return
				}
				orgInterview(this.fromData).then(res=>{
					if(res.data){
						uni.showToast({
							icon: 'none',
							title: `已成功向${this.detail.realName}发送了面试邀请`
						})
						setTimeout(()=>{
						uni.navigateBack({delta: 1})							
						},1500)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-wrap{min-height: calc(100vh);}
	.card-box .card-hd{}
	.userInfo{position: relative; padding: 32rpx; width: 670rpx;border-radius: 12rpx;}
	.userInfo .avatar {
		margin-right: 24rpx;
		width: 88rpx;
		height: 88rpx;
		border: 2rpx solid #F7F9FF;
		border-radius: 50%;
		overflow: hidden;
	}

	.userInfo .icon{width: 32rpx;height: 32rpx;}
	.userInfo .name {
		line-height: 50rpx;
	}

	.userInfo .age {
		line-height: 44rpx;
	}
	.icon-right{position: absolute;right: 32rpx;top: 60rpx;}

	.card-box .card-bd{padding: 0 40rpx;}
	.list{padding: 40rpx 0;}
	.position-item{ position: relative; padding: 32rpx 40rpx;width: 670rpx;border-radius: 12rpx;}
	.line {
		margin: 32rpx 0;
		height: 1rpx;
		background: var(--backgroundDivisionColor);
	}
	.icon-radio{position: absolute; top: 50%; right: 40rpx; margin-top: -16rpx; width: 32rpx;height: 32rpx;border: 2rpx solid #E8CDA7;border-radius: 50%;}

	.btn-group-inner .icon{width: 48rpx;height: 48rpx}

	.btn-group-inner .btn {
		height: 76rpx;
		border-radius: 12rpx;
	}
	.btn-group-inner .action-item{width: 80rpx;}
	.btn-group-inner .btn +.btn{margin-left: 24rpx;}
</style>
